<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>HappyImage</title>
	<style>

		.carousel {
			width: 1150px;
			height: 400px;
			overflow: hidden;
			position: relative;
			margin: 20px auto;
		}

		.carousel img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}
	</style>
</head>

<body>

	<div class="carousel" id="carousel">
		<div>
			<div><img src="img/1.jpg"></div>
			<div><img src="img/2.jpg"></div>
			<div><img src="img/3.jpg"></div>
			<div><img src="img/4.jpg"></div>
			<div><img src="img/5.jpg"></div>
		</div>
	</div>

	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="HappyImage.min.js"></script>
	<script>
		
		$("#carousel").HappyImage({
			effect: "fade",
			autoplay: 3000,
			width: "1150px",
			height: "400px",
			arrowHoverShow: true,
			// dotAlign: "left",
			onChange: function(e) {
				console.log(e);
			}
		});
	</script>

</body>

</html>